import React from 'react'
import '@/assets/css/RoomInfo.scoped.css'

const Component = () =>
{
    let rid = React.params('rid')?? 0

    let [room, SetRoom] = useState([])

    let [count, SetCount] = useState([])

    React.useEffect(() => {
        RoomInfo()
    }, [])

    const RoomInfo = async () =>
    {
        var result = await React.request.post('/room/info', {
            rid: rid,
        })

        if(result.code == 0)
        {
            React.toast(result.msg, null, 'fail')
            return false
        }
        SetRoom(result.data.RoomInfo)
        SetCount(result.data.comment)

        console.log(result)
    }

    const TagList = () =>
        {
            if(room.flag_text <= 0)
            {
                return (<></>)
            }
    
            return (
                <div className="betwee"><div className="left">
                {
                    room.flag_text.map((item, key) => <span key={key}>{item}</span>)
                }
                </div></div>
            )
        }
    
    
        const CommentView = () =>
        {
            if(comment.length <= 0)
            {
                return (<></>)
            }
    
            return (
                <div id="comment" className="comment">
                        <div className="title">评价</div>
    
                        {
                            comment.map((item, key) => (
                                <div className="rate-list-item" key={key}>
                                    <div className="item-content">
                                        <div className="content-prefix">
                                            <div className="ratelist">
                                                <div className="image">
                                                    <img src={item.business ? item.business.avatar_text : require('@/assets/images/avatar.png')} alt="" />
                                                </div>
                                                <p className="nickname">{item.business ? item.business.nickname : ''}</p>
                                            </div>
                                        </div>
                                        <div className="content-main">
                                            <div className="rate">
                                                <React.UI.Rate value={item.rate} readOnly style={{'--star-size': '18px'}} />
                                            </div>
                                            <div className="item-description">
                                                <p>{item.comment}</p>
                                                <p className="item-time">{item.endtime_text}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))
                        }
    
                        <div className="divider-horizontal">
                            <div className="divider-content"><Link>更多评价内容</Link></div>
                        </div>
                </div>
            )
        }
    
        const confirm = () => 
        {
            console.log('跳转')
        }
    return (
        <>
            <React.UI.Image src={room.thumb_text} width={'100%'} height={'40vh'} fit='cover' />

            <div className="detail_top">
                {/* 房间简介 */}
                <div id="intro" className="intro">
                    <div className="title">{room.name}</div>
                    
                    <TagList />

                    <div className="title">{room.content}</div>
                </div>

                {/* 预定须知 */}
                <div className="notesin">
                    <div className="title">预订须知</div>
                    <div className="item">
                        <span className="tips">预订房型：</span>
                        <span>{room.name}</span>
                    </div>
                    <div className="item">
                        <span className="tips">入离时间：</span>
                        <span>当天 12:00 后入住，次日 12:00 前退房</span>
                    </div>
                    <div className="item">
                        <span className="tips">剩余房间数量：</span>
                        <span>{room.total}</span>
                    </div>
                </div>

                {/* 来店地图 */}
                <div className="comment map">
                    <div className="title">地图路线</div>
                    <TMap
                        mapKey="ZPMBZ-BWI3M-PP56L-66XNR-E7JYV-44B72"
                        version='1.exp'
                        center={{ lat: 39.984104, lng: 116.307503 }}
                    />
                </div>

                {/* 评论内容 */}
                <CommentView />
            </div>


            <div className="foot-bar">
                <div className="price">￥{room.price}</div>
                <React.UI.Button onClick={confirm} color='primary' disabled={room.state ? false: true}>立即预定</React.UI.Button>
            </div>
        </>
    )
}

export default Component